<template>
    <view class="myWalletPage">
        <view class="topWrap">
            <image :src="'./static/wallet/walletBg.svg'" class="myImage" />
            <view class="contentStyle">
                <view class="topOne">总金额</view>
                <view class="topTwo">{{ balance||0 }}</view>
                <view class="topThree">
                    <view class="whiteBtnStyle center" v-show="false" @click="()=>onToWithdrawPage(2)">提现</view>
                    <view class="greenBtnStyle center" @click="()=>onToWithdrawPage(1)">充值</view>
                </view>
            </view>
        </view>
        <!-- 中间区域 -->
        <view class="centerStyle">
            <view v-for="(item,index) in showIconDict" :key="index" class="centerStyleItem">
                <image :src="`./static/wallet/${item.code}.svg`" class="imgStyle"/>
                <text class="title">{{ item.title }}</text>
            </view>
        </view>
        <!-- 底部区域 -->
        <scroll-view :scroll-y="true" class="bottomStyle">
            <view class="flex between" @click="onGoWalletDetailsPage">
                <view style="font-size: 32rpx;color: #333;">钱包记录</view>
                <view class="v-center">
                    <text style="font-size: 32rpx;color: #999999;margin-right: 28rpx;">查看全部</text>
                    <image src="./static/rightArrow.svg" style="color: #999999;width: 18rpx;height: 24rpx;"/>
                </view>
            </view>
            <view v-if="previewInfo.length>0">
                <view v-for="(item,index) in previewInfo" :key="index" class="detailItemStyle" :style="{ borderBottom: index === previewInfo.length - 1 ? 'none' : '' }">
                    <view class="flex between top">
                        <view>{{ item.remark||"--" }}</view>
                        <view style="font-size: 28rpx">{{item.changeAmount }}</view>
                    </view>
                    <view class="flex between bottom">
                        <view>{{ item.createTime||"--" }}</view>
                        <view>余额：{{ item.balanceAfter }}</view>
                    </view>
                </view>
            </view>
            <view v-else class="h-center" style="margin-top: 20%;">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </scroll-view >
    </view>
</template>

<script>
import { info } from './services/paymentService';



export default {
    name: 'myWalletPage',
    data() {
        return {
            safeAreaInsets: { bottom: 0 },
            showIconDict: [
                {
                    code:"wVipIcon",
                    title:"VIP会员",
                },
                {
                    code:"wAiIcon",
                    title:"AI试题生成",
                },
                {
                    code:"wArtificialIcon",
                    title:"人工题库",
                },
                {
                    code:"wFaceIcon",
                    title:"人脸验证",
                },
            ],
            // 预览信息
            previewInfo:[
                // {
                //     title:"钱包充值",
                //     time:"2021-08-01 12:00",
                //     money:"+100.00",
                //     balance:"1500.00",
                // },
                // {
                //     title:"VIP兑换",
                //     time:"2021-08-01 12:00",
                //     money:"-100.00",
                //     balance:"1500.00",
                // },
                // {
                //     title:"AI试题生成",
                //     time:"2021-08-01 12:00",
                //     money:"-100.00",
                //     balance:"1500.00",
                // }
            ],
            // 钱包类型
            // walletType:WALLETTYPE
            // 钱包金额
            balance:0,
        };
    },
 
    methods: {
        // 跳转到对应提现充值页面
        onToWithdrawPage(type){
            uni.navigateTo({
                url: 'rechargeOrWithdrawalPage?info=' + encodeURIComponent(JSON.stringify({type}))
            });
        },
        onGoWalletDetailsPage(){
            uni.navigateTo({
                url: 'walletDetailsPage'
            });
        },
        //初始化数据
       async onInitData(){
          const data= await info()
          console.log(data)
          this.balance=data?.balance||0;
          this.previewInfo=data?.logList||[]
        } 
    },
    mounted() {
    },
    onShow(){
        this.onInitData()
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    computed: {
    }
};
</script>

<style scoped lang="scss">
.myWalletPage {
    height: calc( 100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    background-color: "#f3f3f3";
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .topWrap {
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
        padding: 30rpx;
        background: #fff;
        
        .myImage {
            height: 344rpx;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .contentStyle {
            position: absolute;
            top: 30rpx;
            left: 30rpx;
            z-index: 2;
            padding: 46rpx 44rpx 40rpx 40rpx;
            color: #333333;
            /* height: 100%; */
            /* background: red; */
            height: 344rpx;
            width: calc(100% - 60rpx);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            .topOne {
                font-size: 32rpx;
            }

            .topTwo {
                font-size: 60rpx;
                font-weight: bold;
                width: 600rpx;

            }

            .topThree {
                display: flex;
                justify-content: flex-end;

                .whiteBtnStyle {
                    width: 188rpx;
                    color: #37B874;
                    border-radius: 24rpx;
                    background-color: white;
                    margin-right: 40rpx;
                    height: 68rpx;
                }

                .greenBtnStyle {
                    width: 188rpx;
                    color: white;
                    border-radius: 24rpx;
                    background-color: #37B874;
                    height: 68rpx;

                }
            }

        }
    }
    .centerStyle{
        margin: 20rpx 0;
        border-radius: 24rpx;
        background-color: #fff;
        padding: 76rpx 56rpx 60rpx;
        display: flex;
        justify-content: space-between;
        .centerStyleItem{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .imgStyle{
                width: 66rpx;
                height: 66rpx;
            }
            .title{
                color: #333333;
                font-size: 32rpx;
                margin-top: 34rpx;
            }

        }
    }

    .bottomStyle{
        flex: 1;
        border-radius: 24rpx;
        background-color: #fff;
        padding: 62rpx 32rpx 62rpx 56rpx;
        box-sizing: border-box;
        /* 充值详情 */
        .detailItemStyle{
            padding-top: 57rpx;
            padding-bottom: 44rpx;
            border-bottom: 1px solid #F2F2F2;
            .top{
                color: #333333;
                font-size: 32rpx;
                margin-bottom: 20rpx;
                font-weight: bold;
            }
            .bottom{
                color: #999;
                font-size: 24rpx;
            }
        }
    }
}
</style>